<template>
    <!-- 弹窗组件 -->
    <div class="dialog-box">

        <el-dialog v-model="dialogVisible" title="标题" width="700" >
            <span>名称</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button  color="#626aef"  @click="dialogVisible = false">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, watch, watchEffect, defineEmits } from "vue";

// 接收父组件传入的值
const props = defineProps({

});

const dialogVisible = ref<boolean>(false)


</script>

<style lang="scss" scoped>
::v-deep .el-dialog{
    --el-dialog-padding-primary: 0px;
}
::v-deep .el-dialog__header{
    padding: 10px 16px;
    border-bottom: 1px solid #f0f0f0;
    font-weight: bold;
}
::v-deep .dialog-footer{
    padding: 10px 16px;
    border-top: 1px solid #f0f0f0;
}
::v-deep .el-dialog__headerbtn .el-dialog__close{
    color: #000;
}
::v-deep .el-dialog__body{
    padding: 20px 10px;
}
</style>
